import React, { useEffect, useState } from 'react';
import { Card, Form, Input, Button, Select, Steps, Avatar, List, Space } from 'antd';
// import { url } from '../../services';
// import { findEvalData, updateEval } from '../../services/eval/eval';
import { useNavigate } from 'react-router';
// import { findSubjectData, updateSubject } from '../../services/eval/subject';
export default function Subject() {
    const [form] = Form.useForm()
    const navigate = useNavigate();
    const subjects = [{}, {}]
    const rules = [{
        required: true
    }]
    const options = [{
        value: "维度一",
        label: "维度一"
    }, {
        value: "维度二",
        label: "维度二"
    }, {
        value: "维度三",
        label: "维度三"
    }, {
        value: "维度四",
        label: "维度四"
    }, {
        value: "维度五",
        label: "维度五"
    }]
    const next = async () => {
        let fieldData = await form.getFieldValue()
        // let createDate = new Date()
        console.log(fieldData);

    }

    useEffect(() => {
    }, [])
    // async function getSubject() {
    //     let data = await findSubjectData();
    //     setSubjects(data.rows)

    // }
    return <>
        <Steps current="1" style={{ padding: " 0 200px", marginBottom: "20px" }} items={[
            {
                title: '基本信息',

            },
            {
                title: '编辑题目',
                status: "process"

            },
            {
                title: '编辑报告',
            },
        ]} />
        <Card style={{ position: "relative", paddingLeft: "30px" }} >
            <span style={{ position: "absolute", top: "-12px" }}>评测题目</span>
            <Form

                onChange={next}
                form={form}
                labelCol={{
                    span: 3,
                }}
                labelAlign="left"
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
            >
                <Form.Item rules={rules} label="模型选择" name="" >
                    <span>雷达图模型</span>
                </Form.Item>

                <Form.List name="subjects" initialValue={subjects} >
                    {(fields, { add, remove }) =>
                    (
                        <>
                            {fields.map(({ key, name, ...restField }, index, arr) => {
                                return (
                                    <div style={{ display: "flex", alignItems: "center" }}>
                                        <div style={{ flex: 11, border: "1px solid #ccc", width: "100%", padding: "10px 20px", marginBottom: "10px", borderRadius: "5px" }}>
                                            <Form.Item rules={rules} label="题目" name={[name, "subject"]} >
                                                <Input style={{ width: "50%" }} placeholder="请输入题目"></Input>
                                            </Form.Item>
                                            <Form.Item rules={rules} label="维度" name={[name, "dimension"]}>
                                                <Select value="维度一" style={{ width: "120px" }} options={options}></Select>
                                            </Form.Item>
                                            <Form.Item rules={rules} label="选项" wrapperCol={11} style={{ width: "100%" }} >
                                                <Form.List name={[name,"options"]} >
                                                    {(fields, { add, remove }) =>
                                                    (
                                                        <>
                                                            {fields.map(({ key, name, ...restField }, index) => {
                                                                return (
                                                                    <div
                                                                        key={key}
                                                                        style={{
                                                                            display: "flex",
                                                                            marginBottom: 8,
                                                                            width: "100%",
                                                                            alignItems: "center"

                                                                        }}
                                                                        align="baseline"
                                                                    >
                                                                        <div style={{ display: "flex", justifyContent: "space-between", flex: 7, padding: "8px 16px", borderRadius: "5px", border: "1px solid #ccc", }}>
                                                                            <Form.Item
                                                                                name={[name, "title"]}

                                                                                style={{ margin: "0", flex: 1, flexWrap: "nowrap" }}
                                                                            >
                                                                                <span style={{ marginRight: "10px" }}>{index + 1}.</span>
                                                                                <Input placeholder="请输入选项" style={{ width: "60%" }} />
                                                                            </Form.Item>

                                                                            <Form.Item

                                                                                name={[name, 'totalScore']}
                                                                                label="总分值"
                                                                                style={{ margin: "0", flex: 1, }}

                                                                            >
                                                                                <Input placeholder="请输入加减分值，例如：+1或-3" style={{ width: "70%" }} />
                                                                            </Form.Item>
                                                                            <Form.Item
                                                                                name={[name, 'dimesionScore']}
                                                                                label="维度分值"
                                                                                style={{ margin: "0", flex: 1, }}

                                                                            >
                                                                                <Input placeholder="请输入加减分值，例如：+1或-3" style={{ width: "70%" }} />
                                                                            </Form.Item>

                                                                        </div>
                                                                        <div style={{ flex: 1, marginLeft: "10px" }}>
                                                                            {index == 0 ? "" : <Button onClick={() => remove(name)}>删除</Button>}

                                                                        </div>
                                                                    </div>
                                                                )
                                                            })}
                                                            <Form.Item style={{ textAlign: "center" }} name={[name, "addOpt"]}>
                                                                <Button type="dashed" style={{ width: "50%" }} onClick={() => add()} block >
                                                                    添加选项
                                                                </Button>
                                                            </Form.Item>
                                                        </>
                                                    )
                                                    }
                                                </Form.List>

                                            </Form.Item>

                                        </div>
                                        <div style={{ flex: 1, marginLeft: "10px" }}>
                                            {index == 0 ? "" : <Button onClick={() => remove(name)}>删除题目</Button>}

                                        </div>
                                    </div>


                                )
                            })}
                            <Form.Item style={{ flex: 1, width: "100%", textAlign: "end" }}>
                                <Button type="dashed" style={{ width: "50%", }} onClick={() => add()}  >
                                    添加题目
                                </Button>
                            </Form.Item>
                        </>
                    )
                    }
                </Form.List>


            </Form>


        </Card >
        <div style={{ textAlign: "center", margin: "20px" }}>
            <Button type="default" onClick={() => navigate("/manage/addEval")}  >上一步</Button>
            <Button type="primary" style={{ margin: "0 10px" }}>存为草稿</Button>
            <Button type="primary" onClick={next}> 下一步</Button>
        </div>
    </>
}
